<template>
  <view>
    <view class="device_typeList">
      <view class="example">
        <uni-forms ref="form" :model="deviceTypeList" labelWidth="80px">
          <uni-forms-item label="设备类型">
            <uni-easyinput v-model="equipmentTypeName" disabled="true" />
          </uni-forms-item>
          <uni-forms-item label="设备型号" name="equipmentModel">
            <uni-data-select v-model="deviceTypeList.equipmentModel" :localdata="range" :disabled="disabled"/>
          </uni-forms-item>
          <uni-forms-item label="用户名">
            <uni-easyinput v-model="userName" disabled="true" />
          </uni-forms-item>
          <uni-forms-item label="用户号码" name="userNumber">
            <uni-easyinput v-model="deviceTypeList.userNumber" :disabled="disabled" placeholder="请输入用户手机号" />
          </uni-forms-item>
          <uni-forms-item label="下单数量" name="orderNumber">
            <uni-easyinput v-model="deviceTypeList.orderNumber" :disabled="disabled" placeholder="请输入下单数量" />
          </uni-forms-item>
          <uni-forms-item label="下单备注" name="remark">
            <uni-easyinput type="textarea" v-model="deviceTypeList.remark" :disabled="disabled" placeholder="请说明下单需要的备注" :maxlength="max" />
          </uni-forms-item>
          <uni-forms-item label="效果图" name="orderUrl">
            <view class="feedback-image-item">
              <view class="image-box">
                <image :src="(baseUrl+deviceTypeList.orderUrl)"
                  @tap="previewImg(baseUrl+deviceTypeList.orderUrl)"></image>
              </view>
            </view>
          </uni-forms-item>
        </uni-forms>
        <button type="primary" v-if="!disabled" @tap="submit">{{orderId!=null?'修改订单':'新增订单'}}</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getEquipmentDetaile,
    addOrder,
    updateOrder,
    getOrder
  } from "@/api/system/equiment/equipment.js"
  import {
    getUserProfile
  } from "@/api/system/user"
  import config from '@/config'
  export default {
    data() {
      return {
        baseUrl: config.baseUrl,
        equipmentTypeName: null,
        userName: null,
        disabled:false,
        orderId:null,
        range: [],
        deviceTypeList: {
          equipmentTypeId: "",
          equipmentModel: "",
          userId: "",
          userNumber: "",
          orderNumber: "",
          orderUrl: "",
          remark: ""
        },
        queryParams:{
          equipmentTypeId:null
        },
        rules: {
          equipmentModel: {
            rules: [{
              required: true,
              errorMessage: '设备型号不能为空'
            }]
          },
          userNumber: {
            rules: [{
                required: true,
                errorMessage: '下单用户的手机号不能为空'
              },
              {
                pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                errorMessage: '请输入正确的手机号码'
              }
            ]
          },
          orderNumber: {
            rules: [{
              required: true,
              errorMessage: '下单数量不能为空'
            }, {
              pattern: /^[1-9][0-9]*$/,
              errorMessage: '下单数量必须为正整数'
            }]
          }
        },
        max: 500
      }
    },
    created() {
      //查询设备型号
      this.getDicts("equipment_model").then(response => {
        this.range = response.data.map(x => ({
          value: parseInt(x.dictValue),
          text: x.dictLabel,
        }))
      });
    },
    onLoad(option) {
      //判断是新增、修改、还是查询
      if(option.orderId!=null){
        uni.setNavigationBarTitle({
               title: '修改订单'
        });
        this.orderId=option.orderId
        getOrder(option.orderId).then(res=>{
            this.deviceTypeList=res.data
            this.userName =res.data.user.nickName
          })
          if(option.isFlag=='true'){
            this.disabled =true
            uni.setNavigationBarTitle({
                   title: '查看订单'
            });
          }
      }else{
        uni.setNavigationBarTitle({
               title: '新增订单'
        });
        //赋值设备类型id、名称、地址
        this.deviceTypeList.equipmentTypeId = option.equipmentTypeId
        this.deviceTypeList.orderUrl = option.equipmentTypeImgUrl
        //重新进入首页查询userid
        getUserProfile().then(response => {
          this.deviceTypeList.userId = response.data.userId
          this.deviceTypeList.userNumber = response.data.phonenumber
          this.userName = response.data.nickName
        })
      }
      //查询设备类型名称
      this.getEquipmentTypeDetaile(option.equipmentTypeId)
    },
    //清空
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      //获取分类列表的数据
      async getEquipmentTypeDetaile(equipmentTypeId) {
        const res = await getEquipmentDetaile(equipmentTypeId)
        if (res.code == 200) {
          this.equipmentTypeName = res.data.equipmentTypeName
        } else {
          this.$modal.msgError("查询失败");
        }
      },
      submit(ref) {
        this.$refs.form.validate().then(res => {
          if(this.orderId==null){
            addOrder(this.deviceTypeList).then(response => {
              if (response.code === 200) {
               uni.reLaunch({
                url:'../../productIntroduction/my_order/index',
                 success: (res) => {
                   if (res.errMsg = "reLaunch:ok") {
                       uni.showToast({
                         title: "下单成功",
                         icon: 'success',
                         duration:3000
                       })
                   }
                 }
               })
              }
            })
          }else{
            updateOrder(this.deviceTypeList).then(response => {
              if (response.code === 200) {
               uni.reLaunch({
                 url:'../../productIntroduction/my_order/index',
                 success: (res) => {
                   if (res.errMsg = "reLaunch:ok") {
                       uni.showToast({
                         title: "修改成功",
                         icon: 'success',
                          duration:3000
                       })
                   }
                 }
               })
              }
            })
          }
        })
      },
      //浏览图片
      previewImg(url) {
        uni.previewImage({
          urls: [url]
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .example {
    padding: 15px;
    background-color: #fff;
  }


  .feedback-image-item {
    position: relative;
    width: 33.33%;
    height: 0;
    padding-top: 33.33%;
    box-sizing: border-box;

    .image-box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      left: 10rpx;
      bottom: 10rpx;
      border: 1px #c7c7c7 solid;
      border-radius: 10rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>